<template>
  <div class="oe-cropper-img clearfix">
    <div class="oe-cropper-box fl">
      <div class="set-cropper-img">
        <vue-cropper
          ref="cropper"
          :aspect-ratio="1 / 1"
          style="height:300px;"
          :src="headimg"
          preview=".preview"
          centerBox
        />
      </div>
      <div class="set-cropper-btn clearfix">
        
        <a-button class="fl" style="margin-left:10px;position: relative;overflow: hidden;">
          上传本地图片
          <input id="img-upload" ref="input" type="file" name="image" accept="image/*" @change="setImage" />
        </a-button>
         <a-button class="fr" @click="getImg()" style="margin-left:10px;">保存</a-button>
        <!-- <a-button class="fr" @click="rotate(45)" style="margin-left:10px;">
          <a-icon type="redo" />
        </a-button>
        <a-button class="fr" @click="rotate(-45)">
          <a-icon type="undo" />
        </a-button> -->
       
      </div>
    </div>
    <div class="oe-cropper-Preview fl clearfix">
      <p style="color:#FF3C00;">您上传的头像会自动生成三种尺寸，请注意中小尺寸的头像是否清晰</p>
      <div class="oe-Preview">
        <div class="preview" />
        <!-- <img v-if="cropImg" style="width: 200px;height:200px;" :src="cropImg" alt="Cropped Image" /> -->
        <p>大尺寸头像</p>
        <span>180x180像素</span>
      </div>
      <div class="oe-Preview">
        <div class="preview preview-middle" />
        <!-- <img v-if="cropImg" style="width: 200px;height:200px;" :src="cropImg" alt="Cropped Image" /> -->
        <p>大尺寸头像</p>
        <span>180x180像素</span>
      </div>
      <div class="oe-Preview">
        <div class="preview preview-mini" />
        <!-- <img v-if="cropImg" style="width: 200px;height:200px;" :src="cropImg" alt="Cropped Image" /> -->
        <p>大尺寸头像</p>
        <span>180x180像素</span>
      </div>
    </div>
  </div>
</template>
<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
export default {
  components: {
    VueCropper
  },
  props: {
    //剪切图片上传
    headimg: {
      type: String,
      default: '',
      accept: 'image/gif, image/jpeg, image/png'
    },
    file_system_url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      cropImg: '',
      data: null
    };
  },
  mounted() {},
  methods: {
    //旋转
    rotate(deg) {
      this.$refs.cropper.rotate(deg);
    },
    cropImage() {
      // get image data for post processing, e.g. upload or setting image src
      this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
    },
    setImage(e) {
      const file = e.target.files[0];
      if (file.type.indexOf('image/') === -1) {
        alert('Please select an image file');
        return;
      }
      if (typeof FileReader === 'function') {
        const reader = new FileReader();
        reader.onload = (event) => {
          this.imgSrc = event.target.result;
          // rebuild cropperjs with the updated source
          this.$refs.cropper.replace(event.target.result);
        };
        reader.readAsDataURL(file);
      } else {
        alert('Sorry, FileReader API not supported');
      }
    },
    getImg() {
      let completeUrl = (this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL());
      let urlArr = completeUrl.split(',');
      let base64 = urlArr[1];

      let imgType = urlArr[0].replace('data:image/', '').replace(';base64', '');
      let postUrl = `${this.file_system_url}&extension=${imgType}&encode=base64`;
      this.$http.post(postUrl, base64).then((data) => {
        if (data) {
          this.postAvator(data.url);
        }
      });
    },
    postAvator(url) {
      this.$http
        .get('/api/common/accounts/saveAvatar', {
          params: {
            avatarUrl: url
          }
        })
        .then((data) => {
          if (data.code === 1) {
            this.$message.success(data.msg);
            setTimeout(() => {
              this.$router.go(0);
            }, 500);
          }
        });
    }
  }
};
</script>
